<template>
    <div id="feedback">
      <!-- 导航栏 -->
      <van-nav-bar @click-left="back" class="navbar">
        <template #left>
          <van-icon name="arrow-left" size="18" color="#f7f8fa" />
        </template>
        <template #title>
          <div name="arrow-left" class="title">我要反馈</div>
        </template>
      </van-nav-bar>

      <!-- 表单 -->
      <van-form style="height: 100%">
        <van-cell title="选择分类" style="margin-top: 10px">
          <template #label>
            <van-radio-group v-model="radio">
              <van-radio name="1" class="radio">
                <template #icon="props">
                  <van-button size="small" color="#545c80" :plain="!props.checked">功能异常</van-button>
                </template>
              </van-radio>
              <van-radio name="2" class="radio">
                <template #icon="props">
                  <van-button size="small" color="#545c80" :plain="!props.checked">bug反馈</van-button>
                </template>
              </van-radio>
              <van-radio name="3" class="radio">
                <template #icon="props">
                  <van-button size="small" color="#545c80" :plain="!props.checked">意见建议</van-button>
                </template>
              </van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-cell title="详细描述">
          <template #label>
            <van-field
              v-model="desc"
              rows="2"
              type="textarea"
              maxlength="100"
              placeholder="请输入详细描述"
              class="textarea"
              show-word-limit
              autosize
            />
          </template>
        </van-cell>
        <van-cell title="上传截图">
          <template #label>
            <van-uploader v-model="uploader" multiple />
          </template>
        </van-cell>
      </van-form>

      <!-- 提交按钮 -->
      <van-tabbar v-model="active" active-color="#545c80">
        <van-tabbar-item>提交</van-tabbar-item>
      </van-tabbar>
    </div>
</template>

<script>
  import store from '@/store'

  export default {
    name: "Feedback",
    data() {
      return {
        store: store,
        radio: '1',
        desc: '',
        uploader: [],
        active: 0,
      };
    },
    methods: {
      back() {
        // store.state.mine.showPopup = false;
        this.$router.back(-1);
      },
    },
  }
</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }
  .title {
    color: #f7f8fa;
    font-size: 14px;
  }
  .textarea {
    padding: 0;
  }
  .van-radio {
    display: inline-block;
  }
  .radio {
    height: 35px;
    margin-right: 4px
  }
</style>
